<template>
<view class='page-container'>
	<Tabs :tab-list="tabList" :activeTab="activeTab" @change-tab="changeTab" />
	<Search></Search>
	<template v-if="medicineList && medicineList.length">
		<PriceCard
			v-for="(info, idx) in currentList"
			:key="idx"
			:info="info"
		></PriceCard>
	</template>
	<u-empty v-else text="暂无数据" mode="favor" style="margin-top: 100rpx;"></u-empty>
</view>
</template>

<script>
import Tabs from '../../../components/Tabs/tabs.vue';
import Search from '../../../components/Search/index.vue'
import PriceCard from './components/PriceQuery/PriceCard.vue';
export default {
	components: {
		Tabs,
		Search,
		PriceCard
	},
	data(){
		return {
			activeTab: 'medicine',
			tabList: [
				{ label: '药品', value: 'medicine' },
				{ label: '诊疗项目', value: 'project' },
				{ label: '手术', value: 'surgery' },
				{ label: '耗材', value: 'supply' },
			],
			medicineList:[
				{
					title: '阿莫西宁',
					type: '西药',
					specs: '10mg*14片',
					money: '28',
					madeBy: 'XXXX制药集团'
				}
			],
			projectList:[
				{
					title: '彩色多普勒超声',
					type: '检查费',
					money: '180',
				},
				{
					title: '血儿茶酚胺测定',
					type: '化验费',
					money: '140',
				}
			],
			surgeryList:[
				{
					title: '先天性锁骨假关节切除植骨内固定术',
					type: '手术费',
					money: '890',
				},
			],
			supplyList:[
				{
					title: '链接棒5.5、6.0',
					type: '内固定费',
					money: '890',
				},
			]
		}
	},
	computed: {
		// 根据当前activeTab返回对应的列表
		currentList() {
			switch(this.activeTab) {
				case 'medicine':
					return this.filterList(this.medicineList);
				case 'project':
					return this.filterList(this.projectList);
				case 'surgery':
					return this.filterList(this.surgeryList);
				case 'supply':
					return this.filterList(this.supplyList);
				default:
					return [];
			}
		}
	},
	methods: {
		changeTab(tab) {
			this.activeTab = tab;
		},
		search(value) {
			//按照搜索值搜索
			this.searchValue = value
		},
		// 过滤列表的方法
		filterList(list) {
			return list;
		}
	}
}
</script>

<style lang='scss' scoped>
.page-container {
	background: linear-gradient(#e0f3ff 0%, #fff 50%);
	min-height: 100vh;
	padding: 10rpx 30rpx 20rpx;
}
</style>